<template>
  <view class="address-picker">
    <view class="mask" :class="{ active: (mask && show) }" @click="maskClick" @touchmove.prevent @touchmove.stop="()=>{}"></view>
    <view class="content" :class="{ active: show }">
      <view class="btn-line">
        <view class="btn" @click="close">取消</view>
        <view class="btn" :style="'color: '+ackBtnColor" @click="ack">确定</view>
      </view>
      <picker-view style="height: 400rpx;" :value="value" indicator-style="height: 68rpx;line-height: 68rpx;" @change="change">
        <picker-view-column>
          <view v-for="(item, index) in province" :key="index" class="picker-item">{{ item.name }}</view>
        </picker-view-column>
        <picker-view-column v-if="defaultData && defaultData.length > 1">
          <view v-for="(item, index) in city" :key="index" class="picker-item">{{ item.name }}</view>
        </picker-view-column>
        <picker-view-column v-if="defaultData && defaultData.length > 2">
          <view v-for="(item, index) in area" :key="index" class="picker-item">{{ item.name }}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'AddressPicker',
  props: {
    keyStr: {
      type: String,
      default: 'value' // 点击确定返回的实体：1:value、2:name、3:obj({value,name})
    },
    show: {
      type: Boolean,
      default: false // 点击显示地址选择弹窗
    },
    mask: {
      type: Boolean,
      default: true // 点击显示遮罩层
    },
    maskClose: {
      type: Boolean,
      default: true // 点击遮罩层是否关闭地址选择弹窗
    },
    defaultData: {
      type: Array,
      default() { // 默认值
        return ['110000', '110100', '110101']
      }
    },
    ackBtnColor: {
      type: String,
      default: 'rgb(0, 0, 0)' // 确认按钮颜色值
    }
  },
  data() {
    return {
      addressData: [],
      province: [],
      city: [],
      area: [],
      value: []
    }
  },
  watch: {
    show: function(newVal) {
      if (newVal) {
        this.generateAddress(null)
      }
    }
  },
  created() {
    let addressData_json=require('./BSNLAddress.json');
    this.$api.mineApi.getAddress().then(res=>{
      if (res.code == 0) {
        this.addressData = res.data
      }
    }).catch(err=>{
      this.addressData=addressData_json;
    })
    // this.generateAddress(null)
  },
  methods: {
    // 省市区联动
    generateAddress(value) {
      if (value) {
        if (this.value[0] !== value[0]) {
          this.value[0] = value[0]
          this.city = this.addressData.filter(i => i.parent === this.province[this.value[0]].value)
          this.$set(this.value, 1, 0)
          this.area = this.addressData.filter(i => i.parent === this.city[this.value[1]].value)
          this.$set(this.value, 2, 0)
        } else if (this.value[1] !== value[1]) {
          this.value[1] = value[1]
          this.area = this.addressData.filter(i => i.parent === this.city[this.value[1]].value)
          this.$set(this.value, 2, 0)
        } else {
          this.value[2] = value[2]
        }
      } else {
        const tempIndex = [0, 0, 0]
        this.province = this.addressData.filter(i => i.parent === '0')
        let index
        if (this.keyStr === 'obj') {
          index = this.province.findIndex(i => i.value === this.defaultData[0].value)
        } else {
          index = this.province.findIndex(i => i[`${this.keyStr}`] === this.defaultData[0])
        }
        tempIndex[0] = index > -1 ? index : 0

        this.city = this.addressData.filter(i => i.parent === this.province[tempIndex[0]].value)
        if (this.keyStr === 'obj') {
          index = this.city.findIndex(i => i.value === this.defaultData[1].value)
        } else {
          index = this.city.findIndex(i => i[`${this.keyStr}`] === this.defaultData[1])
        }
        tempIndex[1] = index > -1 ? index : 0

        this.area = this.addressData.filter(i => i.parent === this.city[tempIndex[1]].value)
        if (this.keyStr === 'obj') {
          index = this.area.findIndex(i => i.value === this.defaultData[2].value)
        } else {
          index = this.area.findIndex(i => i[`${this.keyStr}`] === this.defaultData[2])
        }
        tempIndex[2] = index > -1 ? index : 0
        setTimeout(() => {
          this.value = tempIndex
        }, 10)
      }
    },
    // 省市区选择改变时
    change(e) {
      this.generateAddress(e.detail.value)
    },
    // 点击遮罩层关闭选择器
    maskClick() {
      if (this.maskClose) {
        this.close()
      }
    },
    // 关闭
    close() {
      this.$emit('close')
    },
    // 确认
    ack() {
      this.$emit('confirm', [this.province[this.value[0]], this.city[this.value[1]], this.area[this.value[2]]])
    }
  }
}
</script>
<style lang="scss">
.address-picker{
  .mask{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    transition: z-index opacity 0.2s linear;

    &.active{
      opacity: 1;
      z-index: 99;
    }
  }
  .content{
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 999;
    transition: transform 0.2s linear;
    transform: translateY(120%);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .btn-line{
      @include flex;
      @include j-between;
      border-bottom: 1px solid #f2f2f2;
      box-shadow: 0 1px 2px #efefef;

      .btn{
        color: #777;
        font-size: 28rpx;
        font-weight: bold;
        line-height: 80rpx;
        padding: 0 40rpx;

        &:active{
          opacity: 0.8;
        }
      }
    }
    .picker-item{
      @include text-ellipsis;
      height: 68rpx;
      line-height: 68rpx;
      text-align: center;
    }

    &.active {
      transform: translateY(0);
    }
  }
}
</style>
